<template>
  <div class="home">
      <div class="home-put">
          <input v-model="lotCode" type="text" placeholder="请输入优惠券码">
          <button @click="clickTest">点击校验</button>
      </div>
  </div>
</template>
<script>
import lottor from 'api/lottor';
import { Toast } from 'vant';
    export default {
        name:'home',
        data(){
            return{
                lotCode:''
            }
        },
        methods:{
            clickTest(){
                const reg = /^[a-zA-Z0-9]{6}$/;
                if(!reg.test(this.lotCode)){
                    Toast.fail('请输入正确的券码')
                    return
                }
                lottor(this.lotCode)
                .then(res=>{
                    console.log(res)
                })
                .catch(err=>{
                    Toast.fail('服务器异常，亲稍后再试！')
                })
            }
        }
    }
</script>
<style scoped lang="scss">
    .home{
        position: relative;
        height: 100%;
        width: 100%;
        &-put{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            input{
                height: 4rem;
                width: 26rem;
                box-sizing: border-box;
                padding-left: 1rem;
                border: 1px solid #c1c1c1;
                border-radius: .5rem;

                &::-webkit-input-placeholder { /* WebKit browsers */ 
                    // font-size:6rem;
                    line-height: 3rem;
                } 
            }
            button{
                height: 4rem;
                width: 26rem;
                border-radius: .5rem;
                margin-top: 2rem;
                background-color: skyblue;
                color:white;
            }
        }
    }
</style>
